<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post } from '@/myaxios'

// 删除功能
const deleteFormOpen = (row) => {
    ElMessageBox.confirm(`确定删除[${row.communityId}-${row.communityName}]吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("godCommunity/delete", row)
        })
        .catch(() => {
            console.log('cancel')
        })
}

// 修改功能
const editDialogVisible = ref(false)
const editForm = reactive({
    editData: {
        communityId: '',
        communityName: '',
        communityLogo: '',
        communityLeader: ''
    }
})
const editFormRef = ref()

const editFormSubmit = () => {
    operationData("godCommunity/edit", editForm.editData)
    editDialogVisible.value = false
}

const editFormOpen = (row) => {
    editDialogVisible.value = true
    get("godCommunity/getGodCommunityById", { communityId: row.communityId })
        .then((resp) => {
            if (resp.data.code === 2000) {
                Object.assign(editForm.editData, resp.data.returnData)
            }
        })
        .catch((error) => {
            console.error('获取数据失败:', error)
        })
}

// 添加功能
const addDialogVisible = ref(false)
const addForm = reactive({
    communityName: '',
    communityLogo: '',
    communityLeader: ''
})
const addFormRef = ref()

const addFormSubmit = () => {
    operationData("godCommunity/add", addForm)
    addDialogVisible.value = false
}

const addFormOpen = () => {
    addDialogVisible.value = true
    nextTick(() => {
        addFormRef.value.resetFields()
    })
}

// 查询表单
const queryForm = reactive({
    communityName: '',
    communityLeaderName: ''
})
const queryFormRef = ref()

const onSubmit = () => {
    queryData(queryForm)
}
const onReset = () => {
    queryFormRef.value.resetFields()
    queryData({})
}

// 分页配置
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})

const handleCurrentChange = (val) => {
    pageInfo.pageData.page = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

const handleSizeChange = (val) => {
    pageInfo.pageData.page = 1
    pageInfo.pageData.pageSize = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

// 表格数据
const tableList = reactive({ tableData: [] })

// 查询公共方法
const queryData = (params) => {
    get("godCommunity/query", params)
        .then((resp) => {
            if (resp.data.code === 2000) {
                tableList.tableData = resp.data.returnData || []
                Object.assign(pageInfo.pageData, resp.data.pageInfo)
            } else if (resp.data.code === 2001) {
                tableList.tableData = []
                Object.assign(pageInfo.pageData, { page: 1, pageSize: 10, total: 0 })
            }
        })
        .catch((error) => {
            console.error('查询失败:', error)
        })
}

// 操作数据（增删改）
const operationData = (url, params) => {
    post(url, params)
        .then((resp) => {
            if (resp.data.code === 2010) {
                ElMessage.success(resp.data.msg)
            } else if (resp.data.code === 2011) {
                ElMessage.error(resp.data.msg)
            }

            // 刷新数据
            const paramsObj = { ...pageInfo.pageData, ...queryForm }
            queryData(paramsObj)
        })
        .catch((error) => {
            console.error('操作失败:', error)
        })
}

// 页面挂载后首次查询数据
onMounted(() => {
    queryData({})
})
</script>

<template>

        <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-form-item label="公会名称" prop="communityName">
            <el-input v-model="queryForm.communityName" placeholder="communityName" />
        </el-form-item>
        <el-form-item label="会长名称" prop="communityLeaderName">
            <el-input v-model="queryForm.communityLeaderName" placeholder="communityLeaderName" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
            <el-button type="primary" plain @click="addFormOpen">添加</el-button>

        </el-form-item>
    </el-form>

    <el-table height="500px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column prop="communityId" label="公会编号" width="180"></el-table-column>
        <el-table-column prop="communityName" label="公会名称" width="180"></el-table-column>
        <el-table-column prop="communityLogo" label="公会logo" width="180"></el-table-column>
        <el-table-column prop="communityLeader" label="会长编号" width="80"></el-table-column>
        <el-table-column prop="communityLeaderName" label="会长名称" width="180"></el-table-column>
        

        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="editFormOpen(scope.row)">编辑</el-button>
                <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

          <!-- 添加对话框 -->
  <el-dialog v-model="addDialogVisible" title="添加" width="500">
    <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 400px">

      <el-form-item label="公会名称" prop="communityName">
        <el-input v-model="addForm.communityName" placeholder="communityName" />
      </el-form-item>
      <el-form-item label="公会logo" prop="communityLogo">
        <el-input v-model="addForm.communityLogo" placeholder="communityLogo" />
      </el-form-item>
      <el-form-item label="会长编号" prop="communityLeader">
        <el-input v-model="addForm.communityLeader" placeholder="communityLeader" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog v-model="editDialogVisible" title="修改" width="500">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 400px">
        <el-form-item label="公会编号" prop="communityId">
        <el-input v-model="editForm.editData.communityId" disabled placeholder="communityId" />
      </el-form-item>
        <el-form-item label="公会名称" prop="communityName">
        <el-input v-model="editForm.editData.communityName" placeholder="communityName" />
      </el-form-item>
      <el-form-item label="公会logo" prop="communityLogo">
        <el-input v-model="editForm.editData.communityLogo" placeholder="communityLogo" />
      </el-form-item>
      <el-form-item label="会长编号" prop="communityLeader">
        <el-input v-model="editForm.editData.communityLeader" placeholder="communityLeader" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>




</template>

<style scoped>

</style>